<template>
	<view class="patient-record">
		<headerview></headerview>
		<view class="con-content">
				<iframe src="http://127.0.0.1:8848/canvas/detail.html" frameborder="0"></iframe>
		</view>
	</view>
</template>

<script>
import uniSegmentedControl from '@/components/uni-segmented-control/uni-segmented-control.vue';
import ChartTimer from '@/components/chart-timer.js';
import headerview from '@/components/headerView.vue';
export default {
	components: { uniSegmentedControl, headerview },
	data() {
		return {
			items: ['普通病历', '卒中NHISS评分'],
			current: 0,
			dType: 1,
			patient120: {},
			dispatchCase: {},
			index: 1,
			answerList: {},
			rtc: {}
		};
	},
	onLoad() {
		this.carInfo();
		this.getAnswer();
		this.call();
	},
	onReady() {
		var _self = this;
		uni.getSystemInfo({
			success: function(res) {
				if (res.pixelRatio > 1) {
					//正常这里给2就行，如果pixelRatio=3性能会降低一点
					//_self.pixelRatio =res.pixelRatio;
					_self.pixelRatio = 2;
				}
			}
		});

		var chartFun = function(e) {
			e.setWH(100, 100, 360, 80, '#c5c5c5');
		};

		var charts = {
			mdc_ecg_elec_potl_i: chartFun,
			mdc_ecg_elec_potl_ii: chartFun,
			mdc_ecg_elec_potl_iii: chartFun,
			mdc_ecg_elec_potl_v1: chartFun,
			mdc_ecg_elec_potl_v2: chartFun,
			mdc_ecg_elec_potl_v3: chartFun,
			mdc_ecg_elec_potl_v4: chartFun,
			mdc_ecg_elec_potl_v5: chartFun,
			mdc_ecg_elec_potl_v6: chartFun,
			mdc_ecg_elec_potl_avf: chartFun,
			mdc_ecg_elec_potl_avl: chartFun,
			mdc_ecg_elec_potl_avr: chartFun
		};

		this.chartTimer = new ChartTimer(charts, this)
			.setInterval(10)
			.testData()
			.run();

		console.log(this.chartTimer);
	},
	methods: {
		huxiji() {
			uni.navigateTo({
				url: 'huxiji',
				success: res => {},
				fail: () => {},
				complete: () => {}
			});
		},
		call() {
			let _this = this;

			// rtc object
			_this.rtc = {
				client: null,
				joined: false,
				published: false,
				localStream: null,
				remoteStreams: [],
				params: {}
			};

			// Options for joining a channel
			var option = {
				appID: '9c3a9d03dac14f2cbcb2dcaa63d2a48a',
				channel: 'test1',
				uid: 123456756,
				userRole: 1
			};

			// Create a client
			_this.rtc.client = AgoraRTC.createClient({
				mode: 'rtc',
				codec: 'h264'
			});

			// Initialize the client
			_this.rtc.client.init(
				option.appID,
				function() {
					console.log('init success');
				},
				err => {
					console.error(err);
				}
			);

			// Join a channel
			_this.rtc.client.join(
				option.token ? option.token : null,
				option.channel,
				option.uid ? +option.uid : null,
				function(uid) {
					console.log('join channel: ' + option.channel + ' success, uid: ' + uid);
					_this.rtc.params.uid = uid;
				},
				function(err) {
					console.error('client join failed', err);
				}
			);
			// Create a local stream
			_this.rtc.localStream = AgoraRTC.createStream({
				streamID: 'abc',
				audio: true,
				video: true,
				screen: false
			});
			// Initialize the local stream
			_this.rtc.localStream.init(
				function() {
					console.log('init local stream success');
					// Publish the local stream
					_this.rtc.client.publish(_this.rtc.localStream, function(err) {
						console.log('publish failed');
						console.error(err);
					});
					// play stream with html element id "local_stream"
					_this.rtc.localStream.play('local_stream');
					_this.rtc.published = true;
				},
				function(err) {
					console.error('init local seam failed ', err);
				}
			);

			_this.rtc.client.on('stream-added', function(evt) {
				var remoteStream = evt.stream;
				var id = remoteStream.getId();
				if (id !== _this.rtc.params.uid) {
					_this.rtc.client.subscribe(remoteStream, function(err) {
						console.log('stream subscribe failed', err);
					});
				}
				console.log('stream-added remote-uid: ', id);
			});
			_this.rtc.client.on('stream-subscribed', function(evt) {
				var remoteStream = evt.stream;
				var id = remoteStream.getId();
				// Add a view for the remote stream.
				_this.rtc.remoteStreams.push(remoteStream);
				_this.addView(id);
				// Play the remote stream.
				remoteStream.play('remote_video_' + id);
				console.log('stream-subscribed remote-uid: ', id);
			});
		},
		addView(id, show) {
			if (id.toString().substring(0, 1) === 2) {
				if (!$('#' + id)[0]) {
					$('<div/>', {
						id: 'remote_video_panel_' + id,
						class: 'video-view',
						style: 'width:346px;height:246px;float:right'
					}).appendTo('#video');

					$('<div/>', {
						id: 'remote_video_' + id,
						class: 'video-placeholder',
						style: 'width:346px;height:246px'
					}).appendTo('#remote_video_panel_' + id);

					$('<div/>', {
						id: 'remote_video_info_' + id,
						class: 'video-profile ' + (show ? '' : 'hide'),
						style: 'width:346px;height:246px'
					}).appendTo('#remote_video_panel_' + id);

					$('<div/>', {
						id: 'video_autoplay_' + id,
						class: 'autoplay-fallback hide',
						style: 'width:346px;height:246px'
					}).appendTo('#remote_video_panel_' + id);
				}
			}
			if (!$('#' + id)[0]) {
				$('<div/>', {
					id: 'remote_video_panel_' + id,
					class: 'video-view',
					style: 'width:100%;height:478px;'
				}).appendTo('#video');

				$('<div/>', {
					id: 'remote_video_' + id,
					class: 'video-placeholder',
					style: 'width:100%;height:478px;'
				}).appendTo('#remote_video_panel_' + id);

				$('<div/>', {
					id: 'remote_video_info_' + id,
					class: 'video-profile ' + (show ? '' : 'hide'),
					style: 'width:100%;height:478px;'
				}).appendTo('#remote_video_panel_' + id);

				$('<div/>', {
					id: 'video_autoplay_' + id,
					class: 'autoplay-fallback hide',
					style: 'width:100%;height:478px;'
				}).appendTo('#remote_video_panel_' + id);
			}
		},
		removeView(id) {
			if ($('#remote_video_panel_' + id)[0]) {
				$('#remote_video_panel_' + id).remove();
			}
		},
		jieshu() {
			let _this = this;
			// Leave the channel
			_this.rtc.client.leave(
				function() {
					// Stop playing the local stream
					_this.rtc.localStream.stop();
					// Close the local stream
					_this.rtc.localStream.close();
					// Stop playing the remote streams and remove the views
					while (_this.rtc.remoteStreams.length > 0) {
						var stream = _this.rtc.remoteStreams.shift();
						var id = stream.getId();
						stream.stop();
						_this.removeView(id);
					}
					console.log('client leaves channel success');
				},
				function(err) {
					console.log('channel leave failed');
					console.error(err);
				}
			);
		},
		carInfo() {
			this.$http.postForm(`/api/pad/v1/dispatch/case/getOne`, { id: 25 }).then(res => {
				this.patient120 = res.data.patient120;
				this.dispatchCase = res.data.dispatchCase;
			});
		},
		getAnswer() {
			this.$http
				.postForm(`/api/pad/v1/nhiss/answer/appGetAnswer`, {
					dispatchId: 25
				})
				.then(res => {
					this.answerList = res.data;
				});
		},
		onClickItem(e) {
			if (this.current !== e.currentIndex) {
				this.current = e.currentIndex;
			}
		},
		diaoduBtn() {
			this.index = 1;
		},
		patientBtn() {
			this.index = 2;
		},
		zhenduanBtn() {
			this.index = 3;
		},
		changeSelect(type) {
			if (this.dType !== type) this.dType = type;
		}
	}
};
</script>

<style lang="less" scoped>
page {
	background: #ffffff;
}
.patient-record {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	.con-header {
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		// padding: 0 23px 0 46px;
		height: 63px;
		line-height: 63px;
		// line-height: 63px;
		width: 100%;
		background: rgba(49, 131, 224, 1);
		color: #ffffff;
		font-size: 14px;
		// box-sizing: border-box;
		.con-header-box {
			width: 98%;
			// background-color: #4CD964;
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;

			.logout {
				display: inline-block;
				width: 100px;
				height: 30px;
				background: rgba(28, 112, 207, 1);
				border-radius: 16px;
				// vertical-align: middle;
				line-height: 30px;
				text-align: center;
				font-size: 11px;
				font-weight: 600;
				margin-left: 47.5px;
				&::before {
					content: '';
					position: absolute;
					background-image: url('../static/image/caozuo_zhuxiao_tuichudenglu@2x.png');
					width: 12.66px;
					height: 13.45px;
					background-size: 100% 100%;
					margin: 9.5px 0 0 -19px;
				}
			}
		}
	}
	.con-content {
		display: flex;
		justify-content: space-between;
		width: 1163px;
		height: 695px;
		box-sizing: border-box;
		margin-top: 10vh;
		.con-video {
			width: 1182.76px;
			// height: 758.42px;
			// background:rgba(39,39,39,1);
			margin-right: 7.91px;
			position: relative;
		}
	}
	.con-box {
		width: 297.67px;
		// height:266px;
		border: 1px solid rgba(226, 226, 226, 1);
		padding: 11.87px 15.83px 19px;
		box-sizing: border-box;
		margin-bottom: 7.91px;
		.con-tab {
			display: flex;
			justify-content: space-between;
			font-size: 12.66px;
			color: #888888;
			line-height: 25.33px;
			.active {
				width: 79.16px;
				height: 25.33px;
				background: rgba(49, 131, 224, 1);
				border-radius: 12.66px;
				color: #ffffff;
				text-align: center;
			}
		}
		.con-des {
			margin-top: 15.83px;
			font-size: 12.66px;
			line-height: 39.58px;
			view text {
				&:nth-child(1) {
					color: rgba(49, 131, 224, 1);
				}
			}
		}
		.con-des2 {
			margin-top: 15.83px;
			font-size: 12.66px;
			line-height: 39.58px;
			view {
				display: flex;
				justify-content: space-between;
				text {
					&:nth-child(2) {
						color: rgba(49, 131, 224, 1);
					}
				}
			}
		}
	}
	.segmented-control {
		background: #f0f7ff;
		margin-top: 0;
		height: 95.13px;
		// color: #333333;
	}

	.patient-record-content {
		.patient-record-tags {
			display: flex;
			justify-content: space-between;
			padding: 50.69px 36.11px 78.47px 42.36px;
			.patient-record-tag {
				text-align: center;
				font-size: 29.16px;
				color: #c3c3c3;
				image {
					margin-right: 20.83px;
					vertical-align: bottom;
				}
				.jijiu {
					width: 39.58px;
					height: 38.19px;
				}
				.fill1 {
					width: 31.94px;
					height: 31.94px;
				}
				.fill2 {
					width: 32.63px;
					height: 32.63px;
				}
			}
			.active {
				color: rgba(49, 131, 224, 1);
			}
		}
		.patient-info {
			padding-left: 27.77px;
			font-size: 25px;
			view {
				text {
					color: rgba(144, 144, 144, 1);
				}
			}
			.patient-info-line {
				height: 0.69px;
				background: rgba(222, 222, 222, 1);
				margin: 29.16px 0 33.33px;
			}
			.patient-address {
				display: flex;
				padding-right: 27.08px;
				view {
					&:first-child {
						color: rgba(144, 144, 144, 1);
					}
					&:last-child {
						flex: 1;
					}
				}
			}
		}
		.patient-des-total {
			margin: 27.77px;
			width: 694.44px;
			height: 95.13px;
			line-height: 95.13px;
			background: rgba(245, 246, 250, 1);
			font-size: 29.16px;
			padding-left: 27.77px;
			box-sizing: border-box;
			text {
				color: rgba(49, 131, 224, 1);
				margin-right: 20.83px;
			}
		}
		.patient-des {
			font-size: 25px;
			padding: 0 27.77px;
			.patient-des-item {
				display: flex;
				text {
					&:first-child {
						width: 60%;
					}
					&:nth-child(2) {
						width: 30%;
					}
					&:last-child {
						width: 10%;
					}
				}
			}
			.patient-des-item-title {
				font-size: 29.16px;
				color: rgba(149, 153, 157, 1);
				line-height: 43.75px;
				margin-bottom: 41.66px;
			}
			.patient-des-line {
				height: 0.69px;
				background: rgba(222, 222, 222, 1);
				margin: 29.16px 0 33.33px;
			}
		}
	}

}

.agora-theme .collapsible-header {
	border: none;
}

.agora-theme .btn-primary {
	color: #fff;
	background-color: #1e88e5 !important;
}

.agora-theme .agora-github-pin {
	background: url('')
		no-repeat round;
	width: 55px;
	height: 55px;
	position: absolute;
	right: 0;
}

.agora-theme .agora-primary-bg {
	color: #fff;
	background-color: #1e88e5 !important;
	align-items: center;
}

.agora-theme .card.container {
	margin-left: 20px;
}

.agora-theme h5 {
	margin: 0;
	margin-left: 20px;
}

.agora-theme nav {
	height: 55px;
}

.agora-theme .agora-secondary-border {
	border: 1px solid #424242 !important;
}

.agora-theme .agora-secondary-bg {
	color: #fff;
	background-color: #424242 !important;
	align-items: center;
}

.agora-theme .switch {
	height: 55px;
	display: flex;
	justify-content: flex-start;
	align-items: center;
}
.agora-theme .switch h6 {
	margin: 0;
}

.agora-theme #local_stream {
	position: relative;
}

.agora-theme #local_video_info {
	position: absolute;
}

.agora-theme .video-view {
	position: absolute;
	right: 17.41px;
	bottom: 20.58px;
	width: 205.83px;
	height: 121.91px;
	z-index: 99;
	// width: 100%;
	// height: 100%;
	// top: 0;
	// bottom: 0;
	// position: fixed;
	// right: 0;
	// left: 0;
}

// .agora-theme .video-view {
//   width: 480px;
//   height: 320px; }
.agora-theme .video-placeholder {
	width: 205.83px;
	height: 121.91px;
}
.agora-theme #local_stream,
.agora-theme #local_video_info {
	// width: 100%;
	// height: 100%;
}

.agora-theme .video-profile {
	position: absolute;
	top: 0;
	left: 0;
	display: block;
	width: 100%;
	z-index: 2;
	color: #fff;
	opacity: 0.9;
	text-shadow: black 0.1em 0.1em 0.2em;
	font-size: 10px;
}

.agora-theme .video-grid {
	// display: grid;
	position: relative;
	grid-gap: 20px;
	grid-template-columns: repeat(2, auto);
	grid-template-rows: auto;
}

.agora-theme .autoplay-fallback {
	display: flex;
	align-items: center;
	justify-content: center;
	position: absolute;
	// width: 100%;
	// height: 100%;
	top: 0;
	display: block;
	cursor: pointer;
}
.agora-theme .autoplay-fallback::after {
	font-size: 1.5rem;
	opacity: 0.9;
	text-shadow: black 0.1em 0.1em 0.2em;
	display: block;
	color: #fff;
}

.uni-tip-group-button {
	position: absolute;
	bottom: 12.9px;
	left: 11.14px;
	/* #ifndef APP-NVUE */
	display: flex;
	/* #endif */
	flex-direction: row;
	justify-content: space-between;
	text-align: center;
	button {
		width: 103.81px;
		height: 34.6px;
		line-height: 34.6px;
		background: rgba(90, 90, 90, 1);
		border-radius: 15.93px;
		font-size: 10.55px;
		opacity: 0.59;
		margin-left: 25.8px;
		color: #ffffff;
		&:nth-child(1)::before {
			content: '';
			position: absolute;
			background: url('./../static/image/Fill 1@2x (3).png');
			width: 14.06px;
			height: 14.06px;
			background-size: 100% 100%;
			margin: 9.38rpx 0 0 -20.62px;
		}
		&:nth-child(2)::before {
			content: '';
			position: absolute;
			background: url(./../static/image/tuichu@2x.png);
			width: 14.06px;
			height: 14.06px;
			background-size: 100% 100%;
			margin: 9.38px 0 0 -20.62px;
		}
		&:nth-child(3) {
			background: #fd3b2f;
			&::before {
				content: '';
				position: absolute;
				background: url(./../static/image/jieshu@2x.png);
				width: 14.06px;
				height: 14.06px;
				background-size: 100% 100%;
				margin: 9.38px 0 0 -20.62px;
			}
		}
	}
	image {
		width: 90px;
		height: 90px;
	}
}
.monitor-left {
	width: 70%;
	display: flex;
	flex-wrap: wrap;
}

.monitor-left-item {
	/* // width: 50%; */
	/* // height: 85px; */
	width: 40%;
	height: 55px;
	display: flex;
}
.monitor-left .monitor-left-item:nth-child(even) {
	margin-left: 10%;
}

.monitor-left-item-text {
	width: 10px;
	height: 10px;
	font-size: 10px;
	font-weight: 500;
	color: rgba(51, 51, 51, 1);
	line-height: 10px;
	margin-top: 10px;
	text-align: right;
}

.monitor-left-item-charts {
	/* // width: 550px; */
	width: 100%;
	height: 100%;
	padding-left: 10px;
	box-sizing: border-box;
	/* // margin: 0 10px 0 10px; */
	/* // background-color: #dd524d; */
	/* // flex: 1; */
}
.onPath {
	width: 230px;
	height: 63px;
	line-height: 63px;
	background: url('../static/image/Fill_1.png') no-repeat;
	background-position-x: 1px;
	background-position-y: 20px;
	position: absolute;
	top: 0px;
	left: 40px;
	color: #ffffff;
	padding: 0;
	border: 0;
	float: left;
}
uni-button:after {
	content: none;
}
uni-button {
	font-size: 14px;
}
iframe {
	width: 1210px;
	height: 100%;
}
</style>
